<template lang='pug'>
  div.card-right-slot
    van-button.btn-detail(size="small" @click="$router.push('/detail/' + commodity.id)") 商品详情
    van-button.btn-buy(size="small" @click="toBuy(commodity)") 立即购买

    vantsku(v-model="skuShow" @buy="buy" @num="getNum" :url="commodity.mainImage + '?imageView2/1/w/200/h/200'" :stock="commodity.stock" :title="commodity.name" :price="commodity.price")
    
</template>

<script type='text/ecmascript-6'>
  import vantsku from '~/components/vansku'
  import { saveorder } from '~/assets/js/order'

  export default {
    props: {
      commodity: {
        type: Object,
        default: {}
      }
    },
    components: {
      vantsku,
    },
    data() {
      return {
        skuShow: false,
        quantity: 1,
      }
    },
    methods: {
      buy() {
        const { name: productName, price: currentUnitPrice, mainImage: productImage, subtitle: title, id: productId } = this.commodity || {}
        const order = {
          productId,
          productName, // 商品名 
          title,
          currentUnitPrice, // 生成订单时的商品单价，单位是元,保留两位小数
          userId: this.userId,
          quantity: this.quantity, // 商品数量
          productImage,
          totalPrice: this.quantity * currentUnitPrice, // 商品总价
        }
        saveorder([order])

        this.$router.push('/buy')
      },
      getNum(quantity) {
        this.quantity = quantity
      },
      toBuy(commodity) {
        this.commodity = commodity
        this.skuShow = true;
      },

    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
.btn-detail, .btn-buy
  margin-left 1rem
</style>
